<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>
<sec:authorize access="isAuthenticated()">
    <html>
        <jsp:include page="head.jsp"/>
        <!DOCTYPE HTML>
        <!--
        /*
         * jQuery File Upload Plugin
         * https://github.com/blueimp/jQuery-File-Upload
         *
         * Copyright 2010, Sebastian Tschan
         * https://blueimp.net
         *
         * Licensed under the MIT license:
         * http://www.opensource.org/licenses/MIT
         */
        -->
        <link rel="stylesheet" href="resources/css/bootstrap-image-gallery.min.css">
        <link rel="stylesheet" href="resources/css/jquery.fileupload-ui.css">
        <body>
            <jsp:include page="menu.jsp" />
            <div class="well notfull">
            <div class="container notfull">
                <br />
                <h1><spring:message code="msg.upload" /></h1>
                <br />
                <br />
                <br />
                <form id="fileupload" action="" method="POST" enctype="multipart/form-data">
                    <div class="row fileupload-buttonbar">
                        <div class="span7">
                            <span class="btn btn-success fileinput-button">
                                <i class="icon-plus icon-white"></i>
                                <span><spring:message code="msg.addfiles" /></span>
                                <input type="file" name="files[]" multiple>
                            </span>
                            <button type="submit" class="btn btn-primary start">
                                <i class="icon-upload icon-white"></i>
                                <span><spring:message code="msg.startupload" /></span>
                            </button>
                            <button type="reset" class="btn btn-warning cancel">
                                <i class="icon-ban-circle icon-white"></i>
                                <span><spring:message code="msg.cancelupload" /></span>
                            </button>
                        </div>
                        <div class="span5 fileupload-progress fade">
                            <div class="progress progress-success progress-striped active">
                                <div class="bar" style="width:0%;"></div>
                            </div>
                            <div class="progress-extended">&nbsp;</div>
                        </div>
                    </div>
                    <div class="fileupload-loading"></div>
                    <br>
                    <table class="table table-striped notfull"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
                </form>
                <br>
            </div>
            <div id="modal-gallery" class="modal modal-gallery hide fade" data-filter=":odd">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">&times;</a>
                    <h3 class="modal-title"></h3>
                </div>
                <div class="modal-body"><div class="modal-image"></div></div>
                <div class="modal-footer">
                    <a class="btn modal-download" target="_blank">
                        <i class="icon-download"></i>
                        <span>Download</span>
                    </a>
                    <a class="btn btn-info modal-prev">
                        <i class="icon-arrow-left icon-white"></i>
                        <span>Previous</span>
                    </a>
                    <a class="btn btn-primary modal-next">
                        <span>Next</span>
                        <i class="icon-arrow-right icon-white"></i>
                    </a>
                </div>
            </div>
            <script id="template-upload" type="text/x-tmpl">
                {% for (var i=0, file; file=o.files[i]; i++) { %}
            <tr class="template-upload fade">
                <td class="preview"><span class="fade"></span></td>
                <td class="name"><span>{%=file.name%}</span></td>
                <td class="title"><label>Title: <input name="title[]" required></label></td>
                <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
                {% if (file.error) { %}
                <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
                {% } else if (o.files.valid && !i) { %}
                <td>
                    <div class="progress progress-success progress-striped active progwidth"><div class="bar" style="width:0%;"></div></div>
                </td>
                <td class="start">{% if (!o.options.autoUpload) { %}
                    <button class="btn btn-primary">
                        <i class="icon-upload icon-white"></i>
                        <span>{%=locale.fileupload.start%}</span>
                    </button>
                    {% } %}</td>
                {% } else { %}
                <td colspan="2"></td>
                {% } %}
                <td class="cancel">{% if (!i) { %}
                    <button class="btn btn-warning">
                        <i class="icon-ban-circle icon-white"></i>
                        <span>{%=locale.fileupload.cancel%}</span>
                    </button>
                    {% } %}</td>
            </tr>
            {% } %}
        </script>
        <script id="template-download" type="text/x-tmpl">
            {% for (var i=0, file; file=o.files[i]; i++) { %}
            <tr class="template-download fade">
                {% if (file.error) { %}
                <td></td>
                <td class="name"><span>{%=file.name%}</span></td>
                <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
                <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
                {% } else { %}
                <td class="preview">{% if (file.thumbnail_url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.url%}"><img src="{%=file.thumbnail_url%}"></a>
                    {% } %}</td>
                <td class="name">
                    <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.url%}">{%=file.name%}</a>
                </td>
                <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
                <td colspan="2"></td>
                {% } %}
            </tr>
            {% } %}
        </script>
        <script>
            $('#fileupload').bind('fileuploadsubmit', function (e, data) {
                var inputs = data.context.find(':input');
                if (inputs.filter('[required][value=""]').first().focus().length) {
                    return false;
                }
                data.formData = inputs.serializeArray();
            });   
        </script>
        <script src="resources/js/vendor/jquery.ui.widget.js"></script>
        <script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script>
        <script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
        <script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
        <script src="resources/js/bootstrap-image-gallery.min.js"></script>
        <script src="resources/js/jquery.iframe-transport.js"></script>
        <script src="resources/js/jquery.fileupload.js"></script>
        <script src="resources/js/jquery.fileupload-fp.js"></script>
        <script src="resources/js/jquery.fileupload-ui.js"></script>
        <script src="resources/js/locale.js"></script>
        <script src="resources/js/main.js"></script>
        </div>
        <jsp:include page="foot.jsp" />
    </sec:authorize>